<style lang="scss">
  @import "~@/styles/base";

  .page {
    height: 100vh;
    .page-bind {
      background-color: #fff;
      border-radius: rpx(10);
      min-height: 100%;
      padding-top: rpx(55);
      .icon-wifi {
        display: block;
        width: rpx(210);
        height: rpx(210);
        margin-left: auto;
        margin-right: auto;
      }
      .tip {
        margin-top: rpx(38);
        font-size: rpx(34);
        color: $black;
        text-align: center;
      }
      .title {
        padding-top: rpx(85);
        padding-bottom: rpx(30);
        color: $light-black;
        font-size: rpx(24);
        line-height: rpx(40);
        text-align: center;
      }
      .form-control-wrap {
        position: relative;
        .btn-right {
          position: absolute;
          right: rpx(100);
          top: 0;
          bottom: 0;
          width: rpx(100);
          z-index: 1000;
          img {
            @include middle-center-y();
            right: rpx(50);
            width: rpx(10);
            height: rpx(18);
          }
        }
      }
      .form-control {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: rpx(35);
        width: rpx(500);
        padding-left: rpx(45);
        padding-right: rpx(45);
        font-size: rpx(28);
        line-height: rpx(40);
        min-height: rpx(70);
        border: rpx(1) solid #ecf0f3;
        border-radius: rpx(35);
        background-color: #ecf0f3;
        &.placeholder {
          color: $light-black;
        }
        &.active {
          border: rpx(1) solid #6baaf2;
          color: $main-color;
          box-shadow: 0 rpx(2) rpx(5) rgba(91, 160, 238, 0.32);
          background-color: #fff;
        }
      }
      .link-tip {
        margin-top: rpx(200);
      }
    }
  }
</style>
<template>
  <div class="page">
    <div class="page-bind">
      <img class="icon-wifi" src="/static/img/bind/wifi.png">
      <div class="tip">配置设备工作Wi-Fi</div>
      <div class="title">当前连接</div>
      <div class="form-control-wrap" @click.stop="toChange">
        <input disabled class="form-control" placeholder-class="placeholder" :class="{active: ssid}" v-model="ssid"
               placeholder="去连接WIFI"/>
        <div class="btn-right">
          <img class="icon-arrow" src="/static/img/bind/arrow.png">
        </div>
      </div>
      <input class="form-control" placeholder-class="placeholder" :class="{active: password}" v-model="password"
             placeholder="请输入密码"/>
      <div class="title link-tip">暂不支持5GWi-Fi热点</div>
      <div class="btn" @click="toNext">下一步</div>
    </div>
  </div>
</template>

<script>
  import wx from "utils/wx";
  import { WIFI_CHECK_REG, DEFAULT_PASSWORD } from "config";

  export default {
    data() {
      return {
        isIos: /iOS/.test(App.systemInfo.system),
        ssid: "",
        password: ""
      };
    },
    components: {},
    methods: {
      async toChange() {
        if (this.isIos) {
          await wx.startWifi();
          await wx.getWifiList();
        } else {
          wx.showModal({
            title: '切换网络提示',
            content: '请在系统-设置页面中更改手机正在连接的Wi-Fi。再回到小程序进行下一步配置。注意这款设备不支持5G的Wi-Fi热点哦',
            showCancel: false
          });
        }
      },
      toNext() {
        if (!this.ssid) {
          wx.showToast('您的手机还没有连接WIFI');
          return false;
        }
        if(/5G/.test(this.ssid)){
          wx.showModal({
            title: '请检查当前wifi热点是否为5G网络',
            content: '该wifi产品只支持2.4Gwifi网络，不支持5G网络，请确认wifi热点。',
            showCancel: false
          });
          return false;
        }
        if (this.password && this.password.length < 8) {
          wx.showToast("WIFI密码小于8位，请检查输入后重试。");
          return false;
        }
        App.currentWifi = {
          ssid: this.ssid,
          password: this.password
        };
        if (this.isIos) {
          wx.navigateTo({ url: "/bind/pages/step3/main" });
        } else {
          wx.onGetWifiList(result => {
            if (result.wifiList && !this.isJump) {
              result.wifiList.some(wifi => {
                if (WIFI_CHECK_REG.test(wifi.SSID)) {
                  this.isJump = true;
                  App.deviceiSSID = wifi.SSID;
                  wx.hideLoading();
                  clearInterval(this.scanTask);
                  clearTimeout(this.timeoutTask);
                  wx.connectWifi({
                    SSID: wifi.SSID,
                    password: DEFAULT_PASSWORD,
                    complete: () => {
                      wx.navigateTo({ url: "/bind/pages/step4/main" });
                    }
                  });
                  return true;
                }
              });
            }
            if (!this.isJump) {
              this.scanTask = setTimeout(() => {
                wx.getWifiList();
              }, 3000);
            }
          });
          wx.showLoading("搜索设备WiFi...");
          wx.getWifiList();
          this.timeoutTask = setTimeout(() => {
            if (!this.isJump) {
              wx.hideLoading();
              wx.navigateTo({ url: "/bind/pages/search-fail/main" });
            }
          }, 30 * 1000);
        }
      }
    },
    onHide() {
      clearTimeout(this.scanTask);
      clearTimeout(this.timeoutTask);
    },
    async onShow() {
      this.isJump = false;
      await wx.startWifi();
      const result = await wx.getConnectedWifi();
      console.log("getConnectedWifi:", result);
      if (result.wifi) {
        this.ssid = result.wifi.SSID;
      }
      wx.onWifiConnected(result => {
        if (this.isJump) {
          return false;
        }
        if (WIFI_CHECK_REG.test(result.wifi.SSID)) {
          this.ssid = result.wifi.SSID;
        }
      });
    }
  };
</script>
